import React from 'react';
import { useNavigate } from 'react-router-dom';
import { containerStyles, buttonStyles, theme } from '../styles/theme';

/**
 * 开始页面组件
 * 作为游戏的入口页面，提供开始游戏和查看规则的功能
 */
const StartPage: React.FC = () => {
  // 使用 React Router 的导航钩子
  const navigate = useNavigate();

  return (
    // 使用页面容器样式，确保页面居中显示
    <div style={containerStyles.page}>
      {/* 使用卡片容器样式，提供内容区域 */}
      <div style={containerStyles.card}>
        {/* 游戏标题 */}
        <h1 style={theme.typography.h1}>AI 你画我猜</h1>
        {/* 游戏简介 */}
        <p style={theme.typography.body}>
          这是一个有趣的绘画游戏，你可以画出任何东西，让AI来猜一猜！
        </p>
        {/* 按钮组 */}
        <div style={{ 
          display: 'flex', 
          gap: theme.spacing.md, 
          marginTop: theme.spacing.xl 
        }}>
          {/* 开始游戏按钮 */}
          <button 
            onClick={() => navigate('/game')}
            style={buttonStyles.primary}
          >
            开始游戏
          </button>
          {/* 游戏规则按钮 */}
          <button 
            onClick={() => {/* 显示游戏规则 */}}
            style={buttonStyles.secondary}
          >
            游戏规则
          </button>
        </div>
      </div>
    </div>
  );
};

export default StartPage;